<template>
  <VueDragResize
    :w="Wwidth"
    :h="Wheigth"
    v-on:resizing="resize"
    @clicked="myDate($event)"
    @click.stop.native="listBtn"
  >
    <div class="diybtn" :style="styleData">
      <span>{{comObj.word.txt}}</span>
    </div>
  </VueDragResize>
</template>
<script>
import VueDragResize from "vue-drag-resize";
import { mapGetters } from "vuex";
export default {
  components: { VueDragResize },
  props: ["comObj", "nowComIdx"],
  computed: {
    ...mapGetters(["btnStyle"]),
    styleData: function() {
      var obj = {};
      obj.fontSize = this.comObj.btnStyle.fontSize;
      obj.textDecoration = this.comObj.btnStyle.textDecoration;
      obj.fontStyle = this.comObj.btnStyle.fontStyle;
      obj.fontWeight = this.comObj.btnStyle.fontWeight;
      obj.textAlign = this.comObj.btnStyle.textAlign;
      obj.width = this.comObj.btnStyle.width + "px";
      obj.height = this.comObj.btnStyle.height + "px";
      obj.background = this.comObj.btnStyle.background;
      obj.color = this.comObj.btnStyle.color;
      obj.borderRadius = this.comObj.borderStyle.borderRadius + "px";
      obj.borderWidth = this.comObj.borderStyle.borderWidth + "px";
      obj.borderStyle = this.comObj.borderStyle.borderStyle;
      obj.borderColor = this.comObj.borderStyle.borderColor;
      return obj;
    },
    Wwidth: function() {
      return this.comObj.btnStyle.width;
    },
    Wheigth: function() {
      return this.comObj.btnStyle.height;
    }
  },
  data() {
    return {};
  },
  methods: {
    myDate(ev) {},
    resize(newRect) {
      this.btnStyle.width = newRect.width;
      this.btnStyle.height = newRect.height;
    },
    listBtn() {
      this.$emit('listBtn')
    }
  }
};
</script>
<style lang="scss" scoped>
.diybtn {
  width: 70px;
  height: 30px;
  // background: url(../../../assets/config_images/noticeicon.png);
  background: rgba(42, 150, 255, 1);
  border-radius: 2px;
  color: #ffffff;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 14px;
}
</style>
